<!-- 组合式 -->
<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		watch
	} from 'vue';

	import {
		ElMessage
	} from 'element-plus'
	import api from '@/api/api';
	import util from '@/utils/util';

	// 参数接收
	const props = defineProps({
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
	})

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();
	watch(modelValue, (n) => {
		pages.formData.id = n;
	})

	// 参数
	const pages = reactive({

		formData: {
			id: '',
		},

		rules: {
			id: [{
				required: true,
				message: '请选择赛事',
				trigger: 'blur'
			}],
		},
	})
	const formRef = ref();

	// 
	onMounted(() => {})

	// 提交
	function changeSave() {

		// 拦截验证
		formRef.value.validate(async valid => {
			if (!valid) return;
			emit('changeSave', pages.formData)
		})
	}

	// 暴露
	defineExpose({
		changeSave,
	})

	// 回调
	const emit = defineEmits(['change', 'changeSave'])
</script>


<template>
	<div class="apply-form">
		<el-form ref="formRef" :model="pages.formData" :rules="pages.rules" style="width: 100%;margin-top: 30px;"
			label-position="right" label-width="125px">

			<!-- 选择赛事： -->
			<el-form-item label="选择赛事：" prop="chose">
				<el-select v-model="modelValue" placeholder="请选择赛事" clearable size="large" :style="{width: '100%'}">
					<el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>

		</el-form>
	</div>
</template>


<style lang="scss">
	.apply-form {

		.el-form {
			display: grid;
			gap: 20px;
		}

		.el-form-item__label {
			font-size: 14px;
			line-height: 40px;
			color: #333333;
		}

		.el-input__wrapper,
		.el-select__wrapper,
		.el-textarea__inner {
			background-color: #F5F8FD !important;
		}
	}
</style>
<style lang="scss" scoped>
	.apply-form {
		margin-top: 40px;
		display: flex;
		flex-direction: column;
	}
</style>